<template>
    <div class="m-wrapper">
        <div class="m-inner">
            <div class="total-item">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" active-text-color="#51dfd0">
                    <el-menu-item index="1" @click="changePage('/index')">{{classification[0]}}</el-menu-item>
                    <el-menu-item index="2" @click="changePage('/second')">{{classification[1]}}</el-menu-item>
                    <el-menu-item index="3" @click="changePage('/third')">{{classification[2]}}</el-menu-item>
                    <el-menu-item index="4" @click="changePage('/fourth')">{{classification[3]}}</el-menu-item>
                    <el-menu-item index="5" @click="changePage('/fifth')">{{classification[4]}}</el-menu-item>
                    <el-menu-item index="6" @click="changePage('/sixth')">{{classification[5]}}</el-menu-item>
                    <el-menu-item index="7" @click="changePage('/seventh')">{{classification[6]}}</el-menu-item>
                    <el-menu-item index="8" @click="changePage('/eighth')">{{classification[7]}}</el-menu-item>
                </el-menu>
                <div class="line"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "middleNav",
        data(){
            return{
                classification:['IT互联网','金融','房地产.建筑','教育培训','医疗健康','法律咨询','供应链.物流','采购贸易'],
                option:0,
                active: false,
                activeIndex: '1',
            }
        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            changePage(address){
                this.$router.push(address);
            }
        },
        components:{

        }
    }
</script>

<style scoped lang="less">
    .m-wrapper{
        display: flex;
        justify-content: center;
    }
    .m-inner{
        height: 30px;
        width: 1200px;
    }
    .el-menu-demo{
        display: flex;
        justify-content: space-around;
    }
    .el-menu-item{
        width: auto;
        font-size: 13px;
    }
</style>